<template>
	<div class="star" :class="starSize">
		<span v-for="star in classItem" class="star-item" :class="star"></span>

	</div>
</template>

<script>
	const num = 5;
	const ON = 'on';
	const HALF = 'half';
	const OFF = 'off';
	export default {
		name: 'star',
		props: {
			size: {
				type: Number
			},
			score: {
				type: Number
			}
		},
		data() {
			return {

			}
		},
		computed: {
			starSize() {
				return "star-" + this.size
			},
			classItem() {
				let reslut = [];
				let boundaryNum = 0.5;
				let remainNum = 0;
//				console.log(this.score)
				let score = Math.floor(this.score);//获取整数
				let pocket = (this.score - score).toFixed(1)//获取小数点
				for (var i=0; i<score;i++) {//获取全星
					 reslut.push(ON + this.size)
				}
				
				if(pocket < boundaryNum){
					reslut.push(OFF+ this.size)
				}else{
					reslut.push(HALF + this.size)
				}
				if(reslut.length < num){
					remainNum = num - reslut.length
					for (var i = 0;i<remainNum;i++) {
						reslut.push(OFF+ this.size)
					}
				}

				//console.log(reslut)
				return reslut
			}
		}
	}
</script>

<style scoped>
	/*星星评分*/
	
	.star {
		display: inline;
		font-size: 0;
	}
	
	.star-48 .star-item {
		display: inline-block;
		margin-right: 14px;
		width: 20px;
		height: 20px;
	}
	.half48 {
		background: url(../../../resource/img/star48_half@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.on48 {
		background: url(../../../resource/img/star48_on@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
    .off48 {
		background: url(../../../resource/img/star48_off@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	
	.star-36 .star-item {
		display: inline-block;
		margin-right: 10px;
		width: 15px;
		height: 15px;
	}
	.half36 {
		background: url(../../../resource/img/star36_half@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.on36 {
		background: url(../../../resource/img/star36_on@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.off36 {
		background: url(../../../resource/img/star36_off@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.star-24 .star-item {
		display: inline-block;
		margin-right: 7px;
		width: 10px;
		height: 10px;
	}
	.half24 {
		background: url(../../../resource/img/star24_half@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.on24 {
		background: url(../../../resource/img/star24_on@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.off24 {
		background: url(../../../resource/img/star24_off@2x.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.star-item:last-child {
		margin: 0;
	}
</style>